<template>
  <div class="p-4">
    <!-- 基础表单组件，绑定 formInstance -->
    <BasicForm
      :formProps="formProps"
      :schema="schema"
      :formInstance="formInstance"
      @register="registerForm"
    />

    <!-- 操作按钮区 -->
    <div class="mt-4 flex space-x-2">
      <Button type="primary" @click="handleSubmit">提交表单</Button>
      <Button @click="handleReset">重置表单</Button>
      <Button @click="handleGetValues">获取表单值</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useVbenForm } from '/@/hooks/component/useVbenForm'; // 框架内置 hook
import { BasicForm, FormSchema, FormInstance } from '/@/components/Form'; // 基础表单组件
import { Button } from '/@/components/Button'; // 按钮组件

// 1. 定义表单字段 schema（核心配置）
const schema: FormSchema[] = [
  {
    field: 'username', // 字段名（对应表单值的 key）
    label: '用户名', // 标签文本
    component: 'Input', // 表单组件类型（Input/Select/DatePicker 等）
    required: true, // 是否必填
    rules: [
      { required: true, message: '请输入用户名' },
      { min: 3, max: 20, message: '长度在 3-20 个字符之间' },
    ], // 验证规则
    componentProps: { // 组件原生属性（如 placeholder、disabled）
      placeholder: '请输入用户名',
      allowClear: true,
    },
  },
  {
    field: 'password',
    label: '密码',
    component: 'InputPassword', // 密码输入框（带隐藏显示功能）
    required: true,
    rules: [{ required: true, message: '请输入密码' }],
    componentProps: {
      placeholder: '请输入密码',
      visibilityToggle: true, // 显示密码可见切换按钮
    },
  },
  {
    field: 'gender',
    label: '性别',
    component: 'Select', // 下拉选择框
    defaultValue: 'male', // 默认值
    componentProps: {
      options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '保密', value: 'secret' },
      ],
    },
  },
  {
    field: 'hobby',
    label: '爱好',
    component: 'Select',
    componentProps: {
      mode: 'multiple', // 多选模式
      options: [
        { label: '篮球', value: 'basketball' },
        { label: '足球', value: 'football' },
        { label: '游泳', value: 'swimming' },
      ],
    },
  },
  {
    field: 'isAgree',
    label: '同意协议',
    component: 'Checkbox',
    componentProps: {
      checkedChildren: '我已阅读并同意用户协议',
    },
    rules: [{ required: true, message: '请同意用户协议' }],
  },
];

// 2. 初始化表单实例（核心逻辑）
const [registerForm, formInstance] = useVbenForm({
  // 表单配置项
  formProps: {
    labelWidth: 120, // 标签宽度
    size: 'middle', // 表单组件尺寸
  },
  // 初始值（可选，会覆盖 schema 中的 defaultValue）
  initialValues: {
    gender: 'female', // 覆盖默认性别为女
  },
  // 提交处理函数
  submitHandler: async (values) => {
    // 表单验证通过后触发，values 为表单最终值
    console.log('表单提交值:', values);
    // 模拟 API 请求
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('提交成功');
  },
});

// 3. 表单操作函数
const handleSubmit = () => {
  // 手动触发表单提交（会自动执行验证）
  formInstance.submit();
};

const handleReset = () => {
  // 重置表单（恢复初始值）
  formInstance.resetFields();
};

const handleGetValues = () => {
  // 获取当前表单值（不触发验证）
  const values = formInstance.getFieldsValue();
  console.log('当前表单值:', values);
};

// 4. 表单属性（可选，用于动态控制表单）
const formProps = ref({
  disabled: false, // 是否禁用整个表单
});
</script>
